<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DTU数据传输单元管理系统</title>
    <script src="js/toast.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <style>
        .status-card {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .status-card h3 {
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }
        
        .status-label {
            font-weight: 500;
            color: #555;
        }
        
        .status-value {
            color: #333;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .status-online {
            color: #28a745;
            font-weight: 500;
        }
        
        .status-offline {
            color: #dc3545;
            font-weight: 500;
        }
        
        .footer {
            text-align: center;
            padding: 2rem;
            color: #666;
            font-size: 0.8rem;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>DTU数据传输单元管理系统</h1>
        <div class="device-info">
            设备ID: <span id="device-id">DTU001</span> |
            型号: <span id="device-model">WiFi+以太网版</span> |
            固件版本: <span id="firmware-version">1.0.0</span>
        </div>
    </div>

    <div class="container">
        <!-- Tab导航 -->
        <div class="nav-tabs">
            <a href="index.html" class="nav-tab active">首页</a>
            <a href="network.html" class="nav-tab">网络配置</a>
            <a href="serial.html" class="nav-tab">串口配置</a>
            <a href="collect.html" class="nav-tab">数据采集</a>
            <a href="push.html" class="nav-tab">数据推送</a>
            <a href="at-command.html" class="nav-tab">AT命令</a>
            <a href="system.html" class="nav-tab">系统设置</a>
        </div>

        <!-- 系统状态概览 -->
        <div class="status-card">
            <h3>系统状态概览</h3>
            <div class="status-grid">
                <div class="status-item">
                    <span class="status-label">系统状态</span>
                    <span class="status-value status-online">正常运行</span>
                </div>
                <div class="status-item">
                    <span class="status-label">网络状态</span>
                    <span class="status-value status-online">已连接</span>
                </div>
                <div class="status-item">
                    <span class="status-label">数据采集</span>
                    <span class="status-value status-online">运行中</span>
                </div>
                <div class="status-item">
                    <span class="status-label">数据推送</span>
                    <span class="status-value status-online">正常</span>
                </div>
                <div class="status-item">
                    <span class="status-label">运行时间</span>
                    <span class="status-value">2天 3小时</span>
                </div>
                <div class="status-item">
                    <span class="status-label">内存使用</span>
                    <span class="status-value">45%</span>
                </div>
            </div>
        </div>

        <!-- 功能导航 -->
        <div class="nav-grid">
            <a href="network.html" class="nav-card">
                <h3><span class="icon">🌐</span>网络配置</h3>
                <p>配置设备的网络连接参数，包括以太网、WiFi和4G网络设置。</p>
                <div class="features">
                    <ul>
                        <li>以太网静态/DHCP配置</li>
                        <li>WiFi连接和扫描</li>
                        <li>4G/LTE网络配置</li>
                    </ul>
                </div>
            </a>

            <a href="serial.html" class="nav-card">
                <h3><span class="icon">🔌</span>串口配置</h3>
                <p>配置RS485和RS232串口参数，用于连接Modbus设备和其他串口设备。</p>
                <div class="features">
                    <ul>
                        <li>RS485/RS232参数设置</li>
                        <li>波特率、数据位、校验位配置</li>
                        <li>串口连接测试</li>
                    </ul>
                </div>
            </a>

            <a href="collect.html" class="nav-card">
                <h3><span class="icon">📊</span>数据采集</h3>
                <p>配置数据采集参数，管理Modbus设备，设置采集间隔和重试机制。</p>
                <div class="features">
                    <ul>
                        <li>采集间隔和重试设置</li>
                        <li>Modbus设备测试</li>
                        <li>采集状态监控</li>
                    </ul>
                </div>
            </a>

            <a href="push.html" class="nav-card">
                <h3><span class="icon">📤</span>数据推送</h3>
                <p>配置数据推送协议和参数，支持MQTT、HTTP、TCP、UDP等多种推送方式。</p>
                <div class="features">
                    <ul>
                        <li>MQTT、HTTP、TCP、UDP协议</li>
                        <li>推送参数和认证配置</li>
                        <li>连接和推送测试</li>
                    </ul>
                </div>
            </a>

            <a href="at-command.html" class="nav-card">
                <h3><span class="icon">⌨️</span>AT命令</h3>
                <p>执行AT命令进行设备管理，包括设备添加、删除、查询等操作。</p>
                <div class="features">
                    <ul>
                        <li>AT命令控制台</li>
                        <li>设备管理命令</li>
                        <li>常用命令示例</li>
                    </ul>
                </div>
            </a>

            <a href="system.html" class="nav-card">
                <h3><span class="icon">⚙️</span>系统设置</h3>
                <p>系统配置管理，包括设备信息、配置备份、系统维护等功能。</p>
                <div class="features">
                    <ul>
                        <li>设备信息配置</li>
                        <li>配置导入导出</li>
                        <li>系统重启和恢复</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>

    <!-- Toast容器 -->
    <div class="toast-container" id="toast-container"></div>

    <div class="footer">
        <p>&copy; 2024 DTU数据传输单元管理系统 v1.0.0</p>
    </div>

    <script>
        // Toast提示系统
        function showToast(message, type = 'success', duration = 3000) {
            const container = document.getElementById('toast-container');
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            
            const titles = {
                success: '成功',
                error: '错误', 
                info: '信息',
                warning: '警告'
            };
            
            toast.innerHTML = `
                <div class="toast-header">
                    <span class="toast-title">${titles[type] || '提示'}</span>
                    <button class="toast-close" onclick="removeToast(this)">&times;</button>
                </div>
                <div class="toast-body">${message}</div>
            `;
            
            container.appendChild(toast);
            
            // 触发显示动画
            setTimeout(() => {
                toast.classList.add('show');
            }, 100);
            
            // 自动移除
            setTimeout(() => {
                removeToast(toast);
            }, duration);
        }
        
        function removeToast(element) {
            const toast = element.closest ? element.closest('.toast') : element;
            if (toast) {
                toast.classList.remove('show');
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }
        }
        
        // 加载设备信息
        async function loadDeviceInfo() {
            try {
                const response = await fetch('/api/system/info');
                const info = await response.json();
                
                if (info.device_id) {
                    document.getElementById('device-id').textContent = info.device_id;
                }
                if (info.device_model) {
                    document.getElementById('device-model').textContent = info.device_model;
                }
                if (info.firmware_version) {
                    document.getElementById('firmware-version').textContent = info.firmware_version;
                }
            } catch (error) {
                console.error('加载设备信息失败:', error);
            }
        }

        // 加载系统状态
        async function loadSystemStatus() {
            try {
                const response = await fetch('/api/status');
                const status = await response.json();
                
                // 更新状态显示
                updateStatusDisplay(status);
            } catch (error) {
                console.error('加载系统状态失败:', error);
            }
        }

        function updateStatusDisplay(status) {
            // 这里可以根据API返回的状态更新页面显示
            // 暂时保持静态显示
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DTU管理系统首页已加载');
            
            // 加载设备信息和状态
            loadDeviceInfo();
            loadSystemStatus();
            
            // 定时刷新状态（每30秒）
            setInterval(() => {
                loadSystemStatus();
            }, 30000);
        });
    </script>
</body>
</html>